<template>
  <div class="page-container">
    <el-card class="order-detail-item">
      <p slot="header" class="title">产品信息</p>
      <div class="order-content-box">
        <img class="order-image" width="160px" :src="detail.productImages">
        <div class="order-content-detail">
          <p class="p1">{{ detail.goodsName }}</p>
          <p>共计：{{ detail.buyCount }}</p>
        </div>
        <div class="order-content-detail">
          <p>￥{{ detail.productPrice | filterMoney }} x {{ detail.buyCount }}</p>
          <p>运费：￥{{ detail.freightAmount | filterMoney }}</p>
          <p>实付款：￥{{ detail.retailAfterCouponAmount | filterMoney }}</p>
        </div>
      </div>
    </el-card>
    <el-card class="order-detail-item">
      <p slot="header" class="title">收货信息</p>
      <div class="order-item-box">
        <span class="order-item-info">收货人：{{ detail.playManName }}</span>
        <span class="order-item-info">手机号：{{ detail.playManPhone }}</span>
        <span class="order-item-info">收货地址：{{ detail.allReceiverAddress }}</span>
      </div>
    </el-card>
    <el-card class="order-detail-item">
      <p slot="header" class="title">订单信息</p>
      <div class="order-item-box">
        <span class="order-item-info">订单编号：{{ detail.orderId }}</span>
        <span class="order-item-info">订单状态：{{ detail.payStatusStr }}</span>
        <span class="order-item-info">下单时间：{{ detail.createTime }}</span>
        <span class="order-item-info">订单类型：</span>
        <span class="order-item-info">购买瓶数：{{ detail.buyCount }}</span>
        <span class="order-item-info">商品金额：{{ detail.productPrice | filterMoney }}</span>
        <span class="order-item-info">运费：{{ detail.freightAmount | filterMoney }}</span>
        <span class="order-item-info">订单金额：{{ detail.orderFreightAmount | filterMoney }}</span>
        <span class="order-item-info">实付金额：{{ detail.retailAfterCouponAmount | filterMoney }}</span>
        <span class="order-item-info">付款方式：{{ detail.paymentMethod }}</span>
        <span class="order-item-info">付款时间：{{ detail.payTime }}</span>
        <span class="order-item-info">付款流水号：{{ detail.thirdNumber }}</span>
        <span class="order-item-info">送气站点：{{ detail.stationName }}</span>
        <span class="order-item-info">送气工/联系方式：{{ detail.deliverEmployeeName }}/{{ detail.deliverEmployeePhone }}</span>
        <span class="order-item-info">送气时间：{{ detail.preDeliverTime }}</span>
        <span class="order-item-info">订单完成时间：{{ detail.completeTime }}</span>
        <span class="order-item-info">顾客/联系方式：{{ detail.playManName }}/{{ detail.playManPhone }}</span>
        <span class="order-item-info">身份证：</span>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getGasOrderDetail } from '@/api/order'

export default {
  name: 'OrderDetail',
  data() {
    return {
      orderId: '',
      detail: {}
    }
  },
  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ])
  },

  created() {
    const { orderId } = this.$route.query
    this.orderId = orderId
    this.getDetail()
  },

  methods: {
    getDetail() {
      const data = {
        orderId: this.orderId
      }
      getGasOrderDetail(data).then(res => {
        this.detail = res || {}
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail-item{
  margin-bottom: 20px;
  .title{
    font-weight: bold;
  }
}
.order-content-box{
  display: flex;
  .order-image{
    width: 160px;
    margin-right: 30px;
    border-radius: 20px;
  }
  .order-content-detail{
    font-size: 16px;
    line-height: 30px;
    margin-right: 30px;
    .p1{
      font-size: 28px;
      font-weight: 600;
      line-height: 40px;
    }
  }

}

.order-item-box{
  display: flex;
  flex-wrap: wrap;
  .order-item-info{
    line-height: 30px;
    width: 50%;
  }
}
</style>
